:root {
    --bs-primary: #00853E; /* Dominant green */
    --bs-secondary: #FFD700; /* Yellow for highlights */
    --bs-white: #FFFFFF; /* White for backgrounds/text */
    --bs-light: #F5F5F5; /* Light gray for subtle backgrounds */
    --bs-dark: #333333; /* Dark for contrast where needed */
}

.table-hover tbody tr:hover {
    background-color: var(--bs-secondary) !important;
    transition: background-color 0.3s ease;
}

.table-hover tbody tr:hover a.text-primary {
    color: var(--bs-dark) !important;
}

.footer-item h4 {
    color: var(--bs-secondary) !important;
}

.table thead th {
    color: var(--bs-secondary) !important;
}

.vision-container, .mission-container, .background-container, .values-container {
    background-color: var(--bs-light);
    border-radius: 0; /* Rectangular shape with sharp corners */
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 0 5px var(--bs-secondary); /* Subtle yellow inner shadow */
    border: 1px solid var(--bs-primary); /* Green border for definition */
    margin-bottom: 30px;
}

.vision-container h4, .mission-container h4, .background-container h4, .values-container h4 {
    color: var(--bs-primary);
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bs-secondary); /* Yellow underline for headers */
}

.vision-container p, .mission-container p, .background-container p, .values-container p {
    font-size: 1.1rem;
    color: var(--bs-dark);
}

.mission-container ul, .values-container ul {
    list-style: none;
    padding: 0;
}

.mission-container ul li, .values-container ul li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--bs-dark);
}

.mission-container ul li i, .values-container ul li i {
    color: var(--bs-secondary); /* Yellow icons */
    margin-right: 10px;
    font-size: 1.2rem;
    margin-top: 5px;
}

/* Tab styling with spacing and rounded corners */
.nav-tabs .nav-item {
    margin-right: 15px; /* Space between tabs */
}

.nav-tabs .nav-link {
    border-radius: 10px; /* Rounded tabs */
    padding: 10px 20px; /* Adjust padding for better spacing */
    transition: all 0.3s ease;
    background-color: var(--bs-primary); /* Green background */
    color: var(--bs-white);
    border: 1px solid var(--bs-primary);
}

.nav-tabs .nav-link.active {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border: 1px solid var(--bs-secondary); /* Yellow border for active tab */
}

.nav-tabs .nav-link:hover {
    background-color: var(--bs-secondary); /* Yellow on hover */
    color: var(--bs-dark);
    border: 1px solid var(--bs-secondary);
}

/* Add this CSS to move the buttons down */
.d-flex.justify-content-center.mb-4 {
    margin-top: 30px; /* This will move the entire tab container down */
    margin-bottom: 30px !important;
}

/* Additional spacing for tab content */
.tab-content {
    margin-top: 20px;
}

/* Mobile compatibility */
@media (max-width: 768px) {
    .vision-container, .mission-container, .background-container, .values-container {
        padding: 20px;
        margin-bottom: 20px;
    }

    .vision-container h4, .mission-container h4, .background-container h4, .values-container h4 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .vision-container p, .mission-container p, .background-container p, .values-container p {
        font-size: 1rem;
    }

    .mission-container ul li, .values-container ul li {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .mission-container ul li i, .values-container ul li i {
        font-size: 1.1rem;
        margin-top: 3px;
    }

    .nav-tabs .nav-item {
        margin-right: 10px;
    }

    .nav-tabs .nav-link {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    .d-flex.justify-content-center.mb-4 {
        margin-top: 20px;
        margin-bottom: 20px !important;
    }

    .tab-content {
        margin-top: 15px;
    }

    .table thead th {
        font-size: 0.9rem;
    }

    .table tbody td {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .vision-container, .mission-container, .background-container, .values-container {
        padding: 15px;
        margin-bottom: 15px;
    }

    .vision-container h4, .mission-container h4, .background-container h4, .values-container h4 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .vision-container p, .mission-container p, .background-container p, .values-container p {
        font-size: 0.9rem;
    }

    .mission-container ul li, .values-container ul li {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .mission-container ul li i, .values-container ul li i {
        font-size: 1rem;
        margin-right: 8px;
    }

    .nav-tabs .nav-item {
        margin-right: 5px;
    }

    .nav-tabs .nav-link {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .d-flex.justify-content-center.mb-4 {
        margin-top: 15px;
        margin-bottom: 15px !important;
    }

    .tab-content {
        margin-top: 10px;
    }

    .table thead th {
        font-size: 0.85rem;
    }

    .table tbody td {
        font-size: 0.8rem;
    }

    /* Ensure tables are scrollable on small screens */
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}